<template>
  <div class="hello">
    <v-nav :current="'4'" :langType="lang" :lang="lang" @EnData="EnData" @ChData="ChData" :isEnShow="isEnShow" :isChShow="isChShow"></v-nav>
    <div class="banner-s">
      <img src="@/assets/banner3.jpg" alt="" style="width: 100%;border: 0">
    </div>
    <div style="background-color: #f5f5f5">
      <div class="daohang">
        <span @click="toList">{{productIntroduce[12]}}  ></span>  <span @click="toList">{{listData.post_title}}  ></span>  <span style="color: #2154b9;font-weight:bolder;cursor: auto">{{productIntroduce[13]}}</span>
      </div>
    </div>
    <div class="main-out">
      <div class="main p-content">
        <div class="zanshi">
          <div class="img-div">
            <img :src="listData.src" alt="">
          </div>
          <div class="main-brief">
            <h1>{{listData.post_title}}</h1>
            <p><span>【{{productIntroduce[0]}}】</span>{{listData.post_title}}</p>
            <p v-if="!!listData.post_product_name"><span>【{{productIntroduce[1]}}】</span>{{listData.post_product_name}}</p>
            <p><span>【{{productIntroduce[2]}}】</span>{{listData.post_product_info}}</p>
            <p><span>【{{productIntroduce[3]}}】</span>{{listData.post_product_type}}</p>
            <p><span>【{{productIntroduce[4]}}】</span>{{listData.post_product_kind}}</p>
            <p><span>【{{productIntroduce[5]}}】</span>{{listData.post_product_spec}}</p>
            <p><span>【{{productIntroduce[9]}}】</span>{{listData.post_num}}</p>
            <p><span>【{{productIntroduce[10]}}】</span>{{listData.post_bzq}}</p>
            <!-- <p><span>【{{productIntroduce[10]}}】</span>{{listData.post_phone}}</p> -->
          </div>
        </div>
        <div class="details">
          <div>
            <h2>【{{productIntroduce[6]}}】</h2>
            <p v-html="listData.post_zhize"></p>
          </div>
          <div>
            <h2>【{{productIntroduce[7]}}】</h2>
            <p v-html="listData.post_excerpt"></p>
          </div>
        </div>
        <div class="zhuyi">
          <p>{{productIntroduce[8]}}</p>
        </div>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
import vNav from '@/components/nav.vue'
import vFooter from '@/components/footer.vue'
import {mapGetters} from 'vuex'
import { getProductInfoData } from '@/services/api.js'
import { getProductInfoDataEn } from '@/services/api_en.js'
export default {
  name: 'productDetails',
  data () {
    return {
      activeName: 'second',
      id: null,
      listData: [],
      isEnShow: null,
      isChShow: null
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'productIntroduce': 'productIntroduce'
    })
  },
  components: {
    vNav,
    vFooter
  },
  methods: {
    _getChList (id) {
      let params = {
        id: id
      }
      getProductInfoData(params).then((res) => {
        console.log(res)
        this.listData = res
      })
    },
    _getEnList (id) {
      let params = {
        id: id
      }
      getProductInfoDataEn(params).then((res) => {
        console.log('英文数据')
        console.log(res)
        this.listData = res
      })
    },
    version (id) {
      if (this.lang === 1) {
        this._getChList(id)
        this.isEnShow = false
        this.isChShow = true
      }
      if (this.lang === 2) {
        this._getEnList(id)
        this.isEnShow = true
        this.isChShow = false
      }
    },
    toList () {
      this.$router.push({name: 'product'})
    },
    EnData (res) {
      this._getEnList(this.id)
    },
    ChData (res) {
      this._getChList(this.id)
    }
  },
  mounted () {
    this.id = this.$route.params.id
    console.log('这个id' + this.id)
    this.version(this.id)
    window.scrollTo(0, 0)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .main-out {
    background-color: #f5f5f5;
    padding-top: 19px;
    padding-bottom: 41px
  }
  .main {
    width: 1008px;
    // height: 620px;
    padding: 26px 96px;
    background-color: #fff;
    .zanshi {
      display: flex;
      .img-div {
        width: 480px;
        height: 320px;
        background-color: #ffffff;
        border: solid 1px #cccccc;
        margin-right: 110px;
        img {
          width: 100%;
          height: 100%
        }
      }
      .main-brief {
        display: flex;
        flex-direction: column;
        width: 397px;
        h1 {
          font-size: 24px;
          letter-spacing: 1px;
          color: #333333;
          margin-bottom: 35px
        }
        span {
          font-size: 16px;
          font-weight: normal;
          letter-spacing: 0px;
          color: #333;
          font-weight: bolder;
        }
        p {
          font-size: 16px;
          line-height: 30px;
          color: #333333;
        }
      }
    }
    .details {
      margin-top: 65px;
      div {
        margin-top: 15px;
        h2 {
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 30px;
          letter-spacing: 0px;
          color: #333333;
          font-weight: bolder;
          margin-bottom: 5px
        }
        p {
          font-size: 16px;
          color: #333333;
          line-height: 30px;
          word-wrap: break-word;
        }
      }
    }
    .zhuyi p {
      text-align: right;
      font-size: 16px;
      color: #dc2d2d;
    }
  }
  .daohang {
    width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    background-color: #f5f5f5;
    padding: 20px 0;
    span {
      color: #666
    }
  }
  .daohang span:hover {
    color: #2154b9;
    cursor: pointer;
  }
</style>
